<template>
  <div class="home">
    <!-- 头部 -->
    <app-header></app-header>
    <!-- 左侧菜单栏 -->
    <app-navbar></app-navbar>
    <!-- 右侧主题内容 -->
    <app-main></app-main>
  </div>
</template>

<script>
import AppHeader from '../components/AppHeader'
import AppMain from '../components/AppMain'
import AppNavbar from '../components/AppNavbar'
export default {
  name: 'Home',
  components: {
    AppHeader,
    AppMain,
    AppNavbar
  }
}
</script>
<style lang="scss" scoped>
 .home {
  width: 100%;
  height: 100%;
 }
  .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #2d3a4b;
    color: #fff;
    justify-content: center;
    font-size: 16px;
  }
.navbar{
  background-color: #545c64;
  width: 230px;
  top : 50px;
  left :0;
  bottom:0;
  position: absolute;
  overflow-y: auto;
}
.main{
  position: absolute;
  left: 230px;
  top: 50px;
  right :0;
  overflow-y: auto;
  bottom:0;
 
} 
 ::-webkit-scrollbar {
  display: none;
} 
</style>
